<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >

      <template #filter-content>

        <el-button v-permission="['sys:log:clear']" type="primary" size="small" icon="el-icon-brush" @click="showClear">清理日志</el-button>

        <dic-list-select v-model="listQuery.params.logType" dic-code="log_type"/>
        <el-input v-model="listQuery.params.realName" size="small" clearable placeholder="操作人" style="width: 200px;" class="filter-item" />
        <el-date-picker
          v-model="listQuery.params.dateRange"
          size="small"
          class="filter-item"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </template>

      <template #data-columns>

        <el-table-column
          label="日志类型"
          prop="logType_dictText"
          align="center"
        />

        <el-table-column
          label="请求地址"
          prop="uri"
        />

        <el-table-column
          label="日志标题"
          prop="title"
        />

        <el-table-column
          label="操作人"
          prop="realName"
          align="center"
        />

        <el-table-column
          label="IP地址"
          prop="ip"
        />

        <el-table-column
          label="执行结果"
          align="center"
        >

          <template v-slot="scope">
            <span v-if="scope.row.success" style="color: #1aac1a">成功</span>
            <span v-else style="color: #ff0000">失败</span>
          </template>

        </el-table-column>

        <el-table-column
          label="操作时间"
          prop="createTime"
        />

        <el-table-column
          fixed="right"
          align="center"
          label="操作"
        >

          <template v-slot="scope">
            <el-link type="primary" icon="el-icon-search" @click="showDetail(scope.row)">详情</el-link>
          </template>
        </el-table-column>

      </template>

    </data-table>

    <el-dialog :close-on-click-modal="false" :visible.sync="detailVisible" title="日志详情" width="50%">

      <el-descriptions :column="1" class="margin-top" title="" size="small" border>
        <el-descriptions-item label="日志类型">
          {{ detail.logType_dictText }}
        </el-descriptions-item>
        <el-descriptions-item label="请求地址">
          {{ detail.uri }}
        </el-descriptions-item>
        <el-descriptions-item label="日志标题">
          {{ detail.title }}
        </el-descriptions-item>
        <el-descriptions-item label="操作人">
          {{ detail.realName }}
        </el-descriptions-item>
        <el-descriptions-item label="IP地址">
          {{ detail.ip }}
        </el-descriptions-item>
        <el-descriptions-item label="执行结果">
          <span v-if="detail.success" style="color: #1aac1a">
            成功
          </span>
          <span v-else style="color: #ff0000">
            失败
          </span>
        </el-descriptions-item>

        <el-descriptions-item label="操作时间">
          {{ detail.createTime }}
        </el-descriptions-item>

        <el-descriptions-item label="操作数据">
          <el-input :rows="5" :value="detail.data" size="small" type="textarea" readonly />
        </el-descriptions-item>

        <el-descriptions-item label="异常信息">
          <el-input :rows="5" :value="detail.log" size="small" type="textarea" readonly />
        </el-descriptions-item>
      </el-descriptions>

    </el-dialog>

    <el-dialog :close-on-click-modal="false" :visible.sync="clearVisible" title="清理日志" width="600px">
      <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="100px">
        <el-form-item label="时间范围" prop="startTime">
          <date-time-picker :start-time.sync="postForm.startTime" :end-time.sync="postForm.endTime"/>
        </el-form-item>
        <el-form-item label="日志类型">
          <dic-list-select v-model="postForm.logType" dic-code="log_type"/>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClear">确认</el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>

import TimeRangePicker from '@/components/TimeRangePicker/index.vue'
import DateTimePicker from '@/components/DateTimePicker/index.vue'
import DicListSelect from '@/components/DicListSelect/index.vue'
import permission from '@/directive/permission/index.js' // 权限判断指令
import { clear } from '@/api/sys/log/log'

export default {
  directives: { permission },
  components: { DicListSelect, DateTimePicker, TimeRangePicker },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          dateRange: []
        }
      },

      options: {
        multi: true,
        // 列表请求URL
        listUrl: '/api/sys/log/paging',
        delete: {
          enable: true,
          permission: 'sys:log:delete',
          url: '/api/sys/log/delete'
        }
      },

      // 详情
      detailVisible: false,
      detail: {},

      // 清理
      clearVisible: false,
      postForm: {
        startTime: '',
        endTime: ''
      },
      rules: {

        startTime: [
          { required: true, message: '时间区间不能为空！' }
        ]
      }
    }
  },

  methods: {

    // 批量操作监听
    showDetail(data) {
      this.detailVisible = true
      this.detail = data
    },

    // 清理窗口
    showClear() {
      this.clearVisible = true
    },

    // 批量清理
    handleClear() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }
        clear(this.postForm).then(() => {
          this.$message.success('操作成功！')
          this.$refs.pagingTable.getList()
          this.clearVisible = false
        })
      })
    }
  }
}
</script>
